<template>
	<view class="">
		<cu-custom  :isBack="true" bgColor="text-black">
			<block slot="content">
				<text style="font-size: 37rpx;" class="text-bold text-black000">登录</text>
			</block>
		</cu-custom>
		
		<view class="login-box" style="margin-top: 200rpx;">
			<view class="txt-50 text-black000 text-bold padding-left-sm padding-tb">
				请您登录/注册
			</view>
			<view class="">
				<form @submit="phoneLogin" class="txt-26">
					<view class="cu-form-group solid-bottom">
						<input type="number" placeholder="输入手机号" name="mobile" v-model="mobile"></input>
					</view>
					<view class="cu-form-group solid-bottom">
						<input type="number" placeholder="输入验证码" name="code" v-model="code"></input>
						<text  class="text-gray txt-24" v-if="codecd">{{codecd}}s</text>
						<text  class="text-theme txt-24" v-else @tap="getcode">验证码</text>
						<!-- <button class='cu-btn bg-green shadow'>验证码</button> -->
					</view>
					
					<button form-type="submit" class="bg-theme block lg margin-top-lg padding-tb-xs">登录或注册</button>
				</form>
			</view>
		</view>
		
		<view class="btm_panel text-center">
			<view class="flex align-center justify-center " style="width: 536rpx;margin: 0 auto;">
				<view class="flex-twice" >
					<view class="solid-bottom" style="height: 1rpx;"></view>
				</view>
				<view class="flex-treble">
					<text>其他方式登录</text>
				</view>
				<view class="flex-twice">
					<view class="solid-bottom" style="height: 1rpx;"></view>
				</view>
				
			</view>
			<view style="margin-bottom: 100rpx;margin-top: 50rpx;">
				<view class="" @tap="showModel">
					<view class="">
						<image  class="third_logo" src="../../static/icons/weixin.png" mode=""></image>
					</view>
					<view class="txt-22" style="color: #666;">
						微信快捷登录
					</view>
				</view>
			</view>
			<view class="text-gray txt-24">
				<text>注册或登录即同意</text>
				<text class="text-black">《中融商城用户协议》</text>和
				<text class="text-black">《隐私政策》</text>
			</view>
		</view>
		
		
		
		
		<view class="cu-modal" :class="thirdshow?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">授权登录</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="flex justify-around">
						<view class="flex-sub padding">
							<button class="cu-btn block  bg-gray" @tap="hideModal">取消</button>
						</view>
						<view class="flex-sub padding">
							<button class="cu-btn block  bg-theme" open-type="getUserInfo" :data-type="item"  @getuserinfo="wxlogin">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>

import util from '@/common/util.js'
export default {
	data() {
		return {
			isShow:true,
			thirdshow:false,
			agree:true,
			codecd:0,
			mobile:'',
			code:'',
			thirdlist:[
				{
					name:'微信',
					type:'weixin',
					icon:'../../static/icons/weixin.png'
				}
			],
		};
	},
	onLoad() {
		
	},
	methods: {
		timerun(){
			setTimeout(()=>{
				if(this.codecd>0){
					this.codecd-=1
					this.timerun()
				}
			},1000)
		},
		CheckboxChange(e){
			console.log(e)
			if(e.detail.value.length>0){
				this.agree = true
			}else{
				this.agree = false
			}
		},
		showModel(){
			if(!this.agree){
				return this.$api.msg("您未同意《中盾共享电商平台服务协议》")
			}
			this.thirdshow = true
		},
		hideModal(){
			this.thirdshow = false
		},
		switchChange(e){
			this.isShow = !this.isShow;
		},
		phoneLogin(e) {
			//定义表单规则
			console.log(e)
			var rule = [
				{
					name: 'mobile',
					textname:'手机号',
					rule: 'req|phone',
				},
				{
					name: 'code',
					textname:'验证码',
					rule: 'req',
				}
			];
			//进行表单检查
			var formData = e.detail.value;
			var errmsg = this.util.formCheck(rule,formData)
			if (errmsg) {
				this.$api.msg(errmsg)
			} else {
				this.login(formData)
			}
		},
		
		login(formData){
			this.isLoad = true
			var data = formData
			util.csAjax('/addons/live/api.user/mobileLogin',data,(ret)=>{
				this.isLoad = false
				uni.setStorageSync('userinfo',ret.data.userInfo)
				// this.$fire.fire('logged',{data:ret.data});
				this.$fire.fire('update',{data:ret.data});
				uni.navigateBack({})
				
			},'登陆中...')
		},
		// 获取验证码
		getcode(){
			var data = {
				mobile:this.mobile
			}
			var rule = [
				{
					name: 'mobile',
					textname:'手机号',
					rule: 'req|phone',
				},
			];
			var errmsg = this.util.formCheck(rule,data)
			if(errmsg){
				return this.$api.msg(errmsg)
			}
			this.util.csAjax('/addons/live/api.user/mobile_code', data, ret => {
				this.codecd=60
				this.timerun()
			});
		},
		wxlogin(e){
			console.log(e)
			if(e.detail.errMsg!="getUserInfo:ok"){
				return uni.showToast({
					icon:'none',
					title:"用户已拒绝"
				})
			}
			var that = this
			uni.login({
				provider: 'weixin',
				success:  (loginRes)=>{
					console.log(JSON.stringify(loginRes));
					
					
					var data  ={
						code:loginRes.code,
						rawData: e.detail.rawData,
					}
					
					
					// 首次用户登陆
					that.util.csAjax('/addons/live/api.user/wxAuthLogin',data,(ret)=>{
						console.log(ret)
						if(~~ret.code==1){
							uni.setStorageSync('userinfo',ret.data.userInfo)
							that.$fire.fire('logged',{data:ret.data});
							this.$fire.fire('update',{data:ret.data});
							uni.navigateBack({})
						}
					},'登录中。。')
					
				}
			});
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		}
		
	}
};
</script>

<style>
	.cu-form-group+.cu-form-group {
		border-top: none;
	
	}

	page{
		background-color: #FFFFFF;
	}
	.cs_mini{
		transform: scale(0.5);
	}
	.cs_inline{
		display: inline;
	}
	.login-box{
		width: 536rpx;
		margin: 0 auto;
	}
	.btm_panel{
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0;
		right: 0;
		padding-bottom: 42rpx;
	}
	.third_logo{
		width: 75rpx;
		height: 60rpx;
	}
</style>


